import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Stack, Text, DetailsList, DetailsListLayoutMode, SelectionMode, TextField } from '@fluentui/react';
import { fetchUsers } from './actions'

function UsersPage() {
    const dispatch = useDispatch();
    const users = useSelector(state => state.users)
    const [search, setSearch] = useState('');
    const filteredUsers = users.filter(user => user.name.toLowerCase().includes(search.toLowerCase()))

    useEffect(() => {
        dispatch(fetchUsers());
    }, [dispatch]);

    const columns = [
        { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
        { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100 },
    ]

    return (
        <Stack tokens={{ childrenGap: 20 }} styles={{ root: { padding: 20 } }}>
            <Text variant='xxLarge'>Users Management</Text>
            <TextField label='Search by Name' value={search}
                onChange={(e, newValue) => setSearch(newValue)} />
            <DetailsList
                items={filteredUsers}
                columns={columns}
                layoutMode={DetailsListLayoutMode.justified}
                selectionMode={SelectionMode.none}
            />
        </Stack>
    );

}


export default UsersPage;

